<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3地图示例</title>
    <link href="./v6.3.1-dist/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="./v6.3.1-dist/ol.js" charset="utf-8"></script>
</head>

<body>
    <div id="map" style="width: 100%;height: 800px;"></div>
    <script type="text/javascript">

    // 地图设置中心，设置到成都，在本地离线地图 offlineMapTiles刚好有一张zoom为4的成都瓦片
    var center = ol.proj.transform([113.26436, 23.12908], 'EPSG:4326', 'EPSG:3857');

    //创建地图
    var map = new ol.Map({
        view: new ol.View({ 
            center: center,
            zoom: 9
        }),
        target: 'map'
    });

    // 添加一个使用离线瓦片地图的层
    var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            
            // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
            url: 'http://192.168.0.130/Tiles_BIGEMAP/{z}/{x}/{y}.png'
        })
    });

    map.addLayer(offlineMapLayer);
</script>
</body>

</html>